<template>
  <div v-if="visible" class="dialog-box">
    <div class="title">请输入登录名</div>
    <el-input v-model="loginName" :maxlength="8" placeholder=""></el-input>
    <div style="margin-top: 20px">
      <el-radio-group v-model="loginSex" size="mini">
        <el-radio-button :label="1">小哥哥</el-radio-button>
        <el-radio-button :label="2">小姐姐</el-radio-button>
      </el-radio-group>
    </div>
    <el-button class="btn-login" type="primary" @click="enter"
      >进入聊天</el-button
    >
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loginName: '',
      loginSex: 1,
    }
  },
  methods: {
    enter() {
      if (!this.loginName) return false
      this.$emit('update:visible', false)
      this.$emit('getLoginInfo', {
        loginName: this.loginName,
        loginSex: this.loginSex,
      })
      sessionStorage.setItem('loginName', this.loginName)
      sessionStorage.setItem('loginSex', this.loginSex)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variable.scss';
.dialog-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: px2(400);
  padding: px2(20);
  box-shadow: 0 px2(5) px2(30) px2(5) rgba(0, 0, 0, 0.3);
  .title {
    font-size: px2(20);
    margin-bottom: px2(20);
  }
  .btn-login {
    margin-top: px2(20);
  }
}
@media screen and (max-width: 992px) {
  .dialog-box {
    width: 80%;
  }
}
</style>
